<template>
  <div>
    <div>
      <mt-header title="模拟考试">
        <mt-button @click="fanhui" slot="left">返回</mt-button>
        <router-link to="/denglu" slot="right"></router-link>
      </mt-header>
    </div>
    <div class="title">
      <span>{{question}}</span>
    </div>
    <div class="a">
      <div class="xuanze" @click="colour1">
        <mt-button
          id="1"
          :style="`width: 50px; height: 50px;margin-right: 30px; border-radius: 50%; border: none; background-color:${color1}; ${disabled}`"
          >A</mt-button>
        <span>{{item1 }}</span>
      </div>
      <div class="xuanze" @click="colour2">
        <mt-button
          id="2"
          :style="`width: 50px; height: 50px;margin-right: 30px; border-radius: 50%; border: none; background-color:${color2}; ${disabled}`"
          
          >B</mt-button
        >
        <span>{{item2 }}</span>
      </div>
      <div class="xuanze" @click="colour3">
        <mt-button
          id="3"
          :style="`width: 50px; height: 50px;margin-right: 30px; border-radius: 50%; border: none; background-color:${color3}; ${disabled}`"
          
          >C</mt-button
        >
        <span>{{ item3 }}</span>
      </div>
      <div class="xuanze" @click="colour4">
        <mt-button
          id="4"
          :style="`width: 50px; height: 50px;margin-right: 30px; border-radius: 50%; border: none; background-color:${color4}; ${disabled}`"
          
          >D</mt-button
        >
        <span>{{ item4 }}</span>
      </div>
    </div>
    <div class="jiexi">
      <span> 解析:{{ explains }} </span>
    </div>
    <div class="dibu">
      <ul>
        <li @click="shoucang">收藏</li>
        <li>第{{ aid }}题</li>
        <li>错误:{{ cuowu }}</li>
        <li>{{ aid }}/100</li>
      </ul>
    </div>
    <div class="topic">
      <mt-button style="margin-left: 30px" @click="topic1"> 上一题 </mt-button>
      <mt-button style="margin-left: 30px" @click="topic2"> 提交 </mt-button
      ><mt-button style="margin-left: 30px" @click="topic"> 下一题 </mt-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      cats: [],
      lie: 0, 
      question:'',
      item1:'',
      item2:'',
      item3:'',
      item4:'',
      explains:'',
      aid:'',
      color1: "white",
      color2: "white",
      color3: "white",
      color4: "white",
      id1: 1,
      id2: 2,
      id3: 3,
      id4: 4,
      cuowu: 0,
      disabled:0,
     
    };
  },
  methods: {
    fanhui() {
      this.$router.push("/tiao");
    },
    topic() {
      this.lie++;
      // console.log(this.lie)
      this.question = this.cats[this.lie].question;
      this.item1 = this.cats[this.lie].item1;
      this.item2 = this.cats[this.lie].item2;
      this.item3 = this.cats[this.lie].item3;
      this.item4 = this.cats[this.lie].item4;
      this.explains = this.cats[this.lie].explains;
      this.aid = this.cats[this.lie].aid;
      this.color1 = `white`;
      this.color2 = `white`;
      this.color3 = `white`;
      this.color4 = `white`;

      // console.log(this.lie);
      // console.log(this.cats[this.lie]);
    },
    topic1() {
      this.lie--;
      this.question = this.cats[this.lie].question;
      this.item1 = this.cats[this.lie].item1;
      this.item2 = this.cats[this.lie].item2;
      this.item3 = this.cats[this.lie].item3;
      this.item4 = this.cats[this.lie].item4;
      this.explains = this.cats[this.lie].explains;
      this.aid = this.cats[this.lie].aid;
      // console.log(this.lie);
      // console.log(this.cats[this.lie]);
    },
    topic2() {
      alert("提交成功");
      this.$router.push("/tiao");
    },
    colour1() {
      // console.log(this.color)
      // console.log(this.cats[this.lie].answer)
      // console.log(this.color)
      console.log(this.id1);
      if (this.id == this.cats[this.lie].answer) {
        this.color = `green`;
        this.disabled = `disabled`
        // console.log(this.color)
      } else {
        this.color1 = `red`;
        this.cuowu++;
        this.disabled = `disabled`
        return;
      }
    },
    colour2() {
      // console.log(this.color)
      // console.log(this.cats[this.lie].answer)
      // console.log(this.color)
      // console.log(this.id2);
      if (this.id2 == this.cats[this.lie].answer) {
        this.color2 = `green`;
        this.disabled = `disabled`
        return;
        // console.log(this.color)
      } else {
        this.color2 = `red`;
        this.cuowu++;
        this.disabled = `disabled`
        return;
      }
    },
    colour3() {
      // console.log(this.color)
      // console.log(this.cats[this.lie].answer)
      // console.log(this.color)
      // console.log(this.id3);
      if (this.id3 == this.cats[this.lie].answer) {
        this.color3 = `green`;
        this.disabled = `disabled`
        // console.log(this.color)
      } else {
        this.color3 = `red`;
        this.cuowu++;
        this.disabled = `disabled`
        // console.log(this.disabled)
      }
    },
    colour4() {
      // console.log(this.color)
      // console.log(this.cats[this.lie].answer)
      // console.log(this.color)
      console.log(this.id4);
      if (this.id4 == this.cats[this.lie].answer) {
        this.color4 = `green`;
        this.disabled = `disabled`
        return;
        // console.log(this.color)
      } else {
        this.color4 = `red`;
        this.cuowu++;
        this.disabled = `disabled`
        return;
      }
    },
    shoucang() {
      this.axios.post("/shoucang", `aid=${this.lie + 1}`).then((result) => {
        // console.log(result);
        if (result.data.code == 1) {
          alert("收藏成功");
        } else {
          alert("收藏失败，题目已存在");
        }
      });
    },
  },
  mounted() {
    this.axios.get(`/test`).then((result) => {
      // console.log(result);
      this.cats = result.data.results;
      this.question = this.cats[this.lie].question;
      this.item1 = this.cats[this.lie].item1;
      this.item2 = this.cats[this.lie].item2;
      this.item3 = this.cats[this.lie].item3;
      this.item4 = this.cats[this.lie].item4;
      this.explains = this.cats[this.lie].explains;
      this.aid = this.cats[this.lie].aid;
      // console.log(this.question)
      // console.log(this.cats);
      
    });
  },
};
</script>

<style scoped>
.a {
  margin-top: 40px;
}
.a div {
  margin-bottom: 30px;
}
.topic {
  margin-right: 30px;
}
.a:hover + .jiexi {
  display: block;
}
.jiexi {
  margin-top: 40px;
  margin-left: 20px;
  display: none;
}

.dibu {
  margin-top: 150px;
}
.dibu ul {
  list-style: none;
  margin-left: 30px;
}
.dibu li {
  display: inline;
  line-height: 40px;
  float: left;
  margin-right: 30px;
}
</style>